<template>
  <div class="devices">
    <div class="header">
      <h2>设备管理</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索设备"
          prefix-icon="Search"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="addDevice">添加设备</el-button>
      </div>
    </div>

    <div class="device-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="device-card">
            <div class="device-card-content">
              <el-icon class="device-icon"><Monitor /></el-icon>
              <div class="device-info">
                <h3>25</h3>
                <p>设备总数</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="device-card">
            <div class="device-card-content">
              <el-icon class="device-icon success"><CircleCheck /></el-icon>
              <div class="device-info">
                <h3>24</h3>
                <p>在线设备</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="device-card">
            <div class="device-card-content">
              <el-icon class="device-icon warning"><Warning /></el-icon>
              <div class="device-info">
                <h3>1</h3>
                <p>离线设备</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="device-card">
            <div class="device-card-content">
              <el-icon class="device-icon info"><InfoFilled /></el-icon>
              <div class="device-info">
                <h3>3</h3>
                <p>需要维护</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="device-list">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>设备列表</span>
            <el-radio-group v-model="deviceType" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="online">在线</el-radio-button>
              <el-radio-button label="offline">离线</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <el-table :data="deviceList" style="width: 100%">
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '在线' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="power" label="功率" />
          <el-table-column prop="temperature" label="温度" />
          <el-table-column prop="lastUpdate" label="最后更新" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                @click="controlDevice(row)"
              >
                控制
              </el-button>
              <el-button
                type="info"
                size="small"
                @click="viewDetail(row)"
              >
                详情
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteDevice(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 添加设备对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加设备"
      width="500px"
    >
      <el-form :model="deviceForm" label-width="100px">
        <el-form-item label="设备名称">
          <el-input v-model="deviceForm.name" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="deviceForm.type" placeholder="请选择设备类型">
            <el-option label="空调" value="ac" />
            <el-option label="照明" value="light" />
            <el-option label="实验设备" value="experiment" />
            <el-option label="通风系统" value="ventilation" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备位置">
          <el-input v-model="deviceForm.location" />
        </el-form-item>
        <el-form-item label="设备描述">
          <el-input
            v-model="deviceForm.description"
            type="textarea"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDevice">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Monitor, CircleCheck, Warning, InfoFilled } from '@element-plus/icons-vue'

const searchQuery = ref('')
const deviceType = ref('all')
const dialogVisible = ref(false)

const deviceForm = ref({
  name: '',
  type: '',
  location: '',
  description: ''
})

const deviceList = ref([
  {
    name: '空调主机',
    type: '空调',
    status: '在线',
    power: '3.2 kW',
    temperature: '24°C',
    lastUpdate: '2024-03-15 10:30'
  },
  {
    name: '照明系统',
    type: '照明',
    status: '在线',
    power: '1.5 kW',
    temperature: '--',
    lastUpdate: '2024-03-15 10:30'
  },
  {
    name: '实验设备A',
    type: '实验设备',
    status: '离线',
    power: '0 kW',
    temperature: '--',
    lastUpdate: '2024-03-15 09:15'
  },
  {
    name: '通风系统',
    type: '通风系统',
    status: '在线',
    power: '2.8 kW',
    temperature: '--',
    lastUpdate: '2024-03-15 10:30'
  }
])

const addDevice = () => {
  dialogVisible.value = true
}

const submitDevice = () => {
  console.log('提交设备:', deviceForm.value)
  dialogVisible.value = false
}

const controlDevice = (row: any) => {
  console.log('控制设备:', row)
}

const viewDetail = (row: any) => {
  console.log('查看详情:', row)
}

const deleteDevice = (row: any) => {
  console.log('删除设备:', row)
}
</script>

<style scoped>
.devices {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.device-overview {
  margin-bottom: 20px;
}

.device-card {
  height: 100%;
}

.device-card-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.device-icon {
  font-size: 40px;
  margin-right: 15px;
}

.device-icon.success {
  color: #67c23a;
}

.device-icon.warning {
  color: #e6a23c;
}

.device-icon.info {
  color: #909399;
}

.device-info h3 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.device-info p {
  margin: 5px 0 0;
  color: #666;
  font-size: 14px;
}

.device-list {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 